<template>
	<view class="me">
		<view class="top">
			<view class="top-img">
				<image class="img" src="../../static/image/bg2.png"></image>
				<view class="qr-code" @click="preview(imageCode, [{url: imageCode}])" v-if="imageCode">
					<image class="img" :src="imageCode"></image>
				</view>
			</view>
			<view class="account-info">
				<view class="total">
					奖金
					<u-icon class="ico" name="eye" v-if="showMoney" @click="toggleShow" size="40"></u-icon>
					<u-icon class="ico" name="/static/image/close-eye.png" v-else @click="toggleShow" size="40"></u-icon>
				</view>
				<view class="money">
					<view v-if="showMoney">
						<text class="mark">￥</text> {{ userInfo.amount }}
					</view>
					<view class="hidden" v-else>
						****
					</view>
				</view>
				<u-button class="btn" size="medium" shape="circle" :custom-style="btnStyle" @click="showtxPop">提现</u-button>
			</view>
		</view>
		<view class="m-list">
			<view class="m-item" @click="linkTo('/pages/me/myRecommend')">
				<image class="icon" src="../../static/image/tuijian.png"></image>
				<text class="title">我的推荐</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="m-item" @click="linkTo('/pages/me/aboutus')">
				<image class="icon" src="../../static/image/feedback.png"></image>
				<text class="title">关于我们</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="btn-wrap">
			<!-- <u-button size="medium" shape="circle" :custom-style="customStyle" @click.stop="exitAccount">退出当前账号</u-button> -->
		</view>
		<!-- 显示询问是否退出账号 -->
		<u-modal v-model="isShow" content="确定要退出当前账号？" :show-cancel-button="true" confirm-color="#ff5252" @confirm="confirmExit"></u-modal>
		<!-- 提现提示框 -->
		<u-modal v-model="isShow2" ref="model" title="提示" content="奖金金额满50将自动提现" @confirm="isShow2 = false"></u-modal>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: 'me', // 我的
		data() {
			return {
				btnStyle: {
					'background': '#FF6600',
					'border-color': '#FF6600',
					'color': '#fff',
					'width': '150rpx'
				},
				customStyle: {
					'background': '#605AF5',
					'color': '#fff',
					'border-color': '#605AF5'
				},
				isShow: false,
				userInfo: {
					photoUrl: '',
					custName: '',
					amount: 0,
				},
				isShow2: false,
				form: {
					amount: '0', // 提现金额
				},
				rules: {
					amount: [
						{ required: true, message: '请输入提现金额', trigger: 'blur' },
						{ type: 'number', message: '只能输入数字', trigger: ['change', 'blur']},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								if(value < 1) {
									return false
								}
							},
							message: '提现金额不能少于1元',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				imageCode: '',
			};
		},
		computed: {
			...mapState({
				userId: state => state.userId,
				showMoney: state => state.showMoney,
			})
		},
		onShow() {
			let token = uni.getStorageSync('token');
			if(token) {
				this.getUserInfo();
				this.generateCode();
			}else {
				uni.redirectTo({
					url: '/pages/login'
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '云招人职业介绍所',
				path: '/pages/login'
			}
		},
		methods: {
			linkTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			exitAccount() { // 退出账号
				this.isShow = true;
			},
			confirmExit() {
				uni.setStorageSync('token', '');
				uni.navigateTo({
					url: '/pages/login'
				})
			},
			getUserInfo() {
				let params = {};
				this.$u.api.postGetAdminInfo(params).then(res => {
					if(res.code == 1000) {
						let data = res.data;
						if(data) {
							this.userInfo.photoUrl = data.photoUrl;
							this.userInfo.custName = data.custName;
							this.userInfo.amount = data.amount;
						}
					}
				})
			},
			toggleShow() {
				this.$store.commit('commitToggleShowMoney', !this.showMoney);
			},
			showtxPop() { // 提现
				this.isShow2 = true;
				// this.$u.toast('奖金金额满50将自动提现');
				// if(this.userInfo.amount > 0) {
				// 	this.isShow2 = true;
				// }else {
				// 	this.$u.toast('余额为0，无法提现');
				// }
			},
			withDraw() {
				this.$refs.uForm.setRules(this.rules);
				this.$refs.uForm.validate(valid => {
					if(valid) {
						console.log('通过')
						let params = {
							openId: uni.getStorageSync('openId'),
							amount: this.form.amount
						}
						
						this.isShow2 = false;
					}else {
						console.log('不通过')
						this.$refs.model.clearLoading();
					}
				})
			},
			generateCode() {
				let userId = uni.getStorageSync('userId');
				let params = {
					busiType: 1,
					busiId: userId + ',GG',
					url: 'pages/index/index'
			
				}
				this.$u.api.postGenerateQrCode(params).then(res => {
					if (res.status == true) {
						this.imageCode = 'data:image/jpeg;base64'+res.data;
					}
				})
			},
			preview(url, urls) {
				uni.previewImage({
					current: url,
					urls: urls.map(item => item.url)
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
.me {
	.top {
		height: 490rpx;
		.top-img {
			position: relative;
			width: 750rpx;
			height: 333rpx;
			
			.img {
				width: 100%;
				height: 100%;
			}
		
			.qr-code {
				position: absolute;
				left: 55rpx;
				top: 90rpx;
				width: 142rpx;
				height: 142rpx;
				border: 6rpx solid;
				border-image: radial-gradient(circle, rgba(242, 142, 38, 1), rgba(253, 100, 79, 1)) 6 6;
				box-shadow: 0px 3rpx 7rpx 0px rgba(176, 55, 33, 0.35);
		
				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.account-info {
			position: relative;
			height:200rpx;
			padding: 60rpx 35rpx 0;
			background:linear-gradient(0deg,rgba(81,77,215,1),rgba(116,110,248,1));
			box-shadow:0rpx 0rpx 43rpx 0rpx rgba(51,74,211,0.3);
			// border-radius:70rpx 70rpx 0rpx 0rpx;
			top: -40rpx;
			.total {
				font-size:26rpx;
				font-weight:500;
				color:rgba(255,255,255,1);
				margin-bottom: 10rpx;
				.ico {
					margin-left: 10rpx;
					vertical-align: middle;
				}
			}
			.money {
				font-size:40rpx;
				font-weight:bold;
				color:rgba(255,255,255,1);
				.mark {
					font-size: 24rpx;
					font-weight: normal;
				}
				.eye {
					width: 40rpx;
					height: 40rpx;
					margin-top: 20rpx;
					margin-left: 20rpx;
				}
				.hidden {
					font-size: 50rpx;
					font-weight: bold;
				}
			}
			.btn {
				position: absolute;
				right: 34rpx;
				top: 68rpx;
			}
		}
	}
	.m-list {
		padding: 20rpx;
		.m-item {
			display: flex;
			padding: 15rpx 26rpx;
			background: #fff;
			border-bottom: 1px solid #eee;
			&:last-child {
				border-bottom: none;
			}
			.icon {
				width: 40rpx;
				height: 40rpx;
			}
			.title {
				flex: 1;
				margin-left: 20rpx;
			}
		}
	}
	.btn-wrap {
		text-align: center;
		margin-top: 30rpx;
	}
	
	.pop-content {
		padding: 20rpx 30rpx;
	}
	
	.rules {
		padding: 20rpx 30rpx;
		.rule-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		.rule-info {
			font-size: 26rpx;
			font-weight: 500;
			color: #999;
			margin-bottom: 15rpx;
			text-indent: 2em;
			line-height: 40rpx;
		}
		.red {
			color: red;
		}
		.bold {
			font-weight: bold;
			color: #333;
		}
		.normal {
			font-weight: normal;
		}
	}
}
</style>
